<template>
	<view>
		<form @submit="onSubmit">
			<view class="row">
				<input type="text" name="username"/>
			</view>
			<view class="row">
				<textarea name="content"></textarea>
			</view>
			
			<view class="row">
				<radio-group name="gender">
					<radio value="女">女</radio>
					<radio value="男">男</radio>
					<radio value="保密" checked="">保密</radio>
				</radio-group>
			</view>
			
			<view class="row">
				<picker :range="options" name="school" :value="selectValue" @change="pickerChange">
					<view>点击选择学历: {{options[selectValue]}}</view>
				</picker>
			</view>
			
			<view class="row">
				<button form-type="submit">提交表单</button>
				<button form-type="reset">重置表单</button>
			</view>
			{{obj}}
		</form>
	</view>
</template>

<script>
	export default {
		data() { 
			return {
				obj: null,
				options: ["高中", "大专", "本科", "博士"],
				selectValue: 2,
			}
		},
		
		methods: {
			onSubmit(e) {
				console.log(e)
				this.obj = e.detail.value
				this.obj.school = this.options[this.selectValue]
			},
			
			pickerChange(e) {
				this.selectValue = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	input, textarea {
		border: 1px solid #eee;
	}
	.row {
		padding: 0 20rpx;
	}
</style>